<script lang="ts" setup>
import { isEmpty } from 'lodash-es'

defineProps<{
  /** 头像URL */
  url?: string
}>()
</script>

<template>
  <ui-aspect-ratio>
    <view v-if="isEmpty(url)" class="relative h-full from-#f89c22 to-#fbcd90 bg-gradient-to-b">
      <view class="i-weui:me-filled relative h-full w-full translate-y-10% text-white"></view>
      <view class="absolute top-0 h-full w-full from-#fbcd90 to-transparent bg-gradient-to-t"></view>
    </view>
    <image v-else class="h-full w-full" :src="url" mode="aspectFill"></image>
  </ui-aspect-ratio>
</template>

<style lang="less" scoped>
// #ifdef MP-KUAISHOU
.bg-gradient-to-t {
  background-image: linear-gradient(to top, #fbcd90, transparent);
}
// #endif
</style>
